<template>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="待付款" name="first">
            <el-form ref="form" :model="orders" label-width="80px">
                <el-form-item label="订单类型">
                    <el-select v-model='orders1.goods_type'>
                        <el-option label="全部" value="aa"></el-option>
                        <el-option label="团购优惠" value="bb"></el-option>
                        <el-option label="房源认购" value="cc"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="orderTime" label="开始时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="orders.start_time" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item class="orderTime" label="结束时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="orders.end_time" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="所属楼盘">
                    <el-select v-model='orders.real_estate_name'>
                        <el-option label="全部" value="aa"></el-option>
                        <el-option label="团购优惠" value="bb"></el-option>
                        <el-option label="房源认购" value="cc"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="买家手机号" label-width="85px" >
                    <el-input v-model="orders.user_phone"></el-input>
                </el-form-item>
                <el-form-item label="代下单用户" label-width="85px">
                    <el-select v-model='orders.admin_account'>
                        <el-option label="全部" value="aa"></el-option>
                        <el-option label="团购优惠" value="bb"></el-option>
                        <el-option label="房源认购" value="cc"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单号">
                    <el-input v-model="orders.orders_no"></el-input>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="orderSelect">搜索</el-button>
            </el-form>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="orders_no"
                        label="订单号">
                </el-table-column>
                <el-table-column
                        prop="goods_name"
                        label="商品">
                </el-table-column>
                <el-table-column
                        prop="user.user_name"
                        label="下单用户">
                </el-table-column>
                <el-table-column
                        prop="orders_total"
                        label="订单总额">
                </el-table-column>
                <el-table-column
                        prop="orders_time"
                        label="下单时间">
                </el-table-column>
                <el-table-column
                        prop="payment_method"
                        label="支付方式">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="260px">
                    <template scope="scope">
                        <el-button type="primary" @click="detail(scope.row)">查看</el-button>
                        <el-button type="primary" @click="">取消</el-button>
                        <el-button type="primary" @click="receive(scope.row)">收款</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="getTableData"
                    :page-count="pageCount"
                    :current-page="currentPage"
                    background
                    layout="prev, pager, next">
            </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="已付款" name="secend">
            <el-form ref="form" :model="orders1" label-width="80px">
                <el-form-item label="订单类型">
                    <el-select v-model='orders1.goods_type'>
                        <el-option label="全部" value="aa"></el-option>
                        <el-option label="团购优惠" value="bb"></el-option>
                        <el-option label="房源认购" value="cc"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品状态">
                    <el-select v-model='orders1.goods_type'>
                        <el-option label="全部" value="aa"></el-option>
                        <el-option label="团购优惠" value="bb"></el-option>
                        <el-option label="房源认购" value="cc"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="orderTime" label="开始时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="orders1.start_time" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item class="orderTime" label="结束时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="orders1.end_time" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="所属楼盘">
                    <el-select v-model='orders1.real_estate_name'>
                        <el-option label="全部" value="aa"></el-option>
                        <el-option label="团购优惠" value="bb"></el-option>
                        <el-option label="房源认购" value="cc"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="买家手机号" label-width="85px" >
                    <el-input v-model="orders1.user_phone"></el-input>
                </el-form-item>
                <el-form-item label="代下单用户" label-width="85px">
                    <el-select v-model='orders1.admin_account'>
                        <el-option label="全部" value="aa"></el-option>
                        <el-option label="团购优惠" value="bb"></el-option>
                        <el-option label="房源认购" value="cc"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单号">
                    <el-input v-model="orders1.orders_no"></el-input>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
            </el-form>
            <el-table
                    :data="tableData2"
                    style="width: 100%">
                <el-table-column
                        prop="orders_no"
                        label="订单号">
                </el-table-column>
                <el-table-column
                        prop="goods_name"
                        label="商品">
                </el-table-column>
                <el-table-column
                        prop="user.user_name"
                        label="下单用户">
                </el-table-column>
                <el-table-column
                        prop="orders_total"
                        label="订单总额">
                </el-table-column>
                <el-table-column
                        prop="orders_time"
                        label="下单时间">
                </el-table-column>
                <el-table-column
                        prop="payment_method"
                        label="支付方式">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="260px">
                    <template scope="scope">
                        <el-button type="primary" @click="detail(scope.row)">查看</el-button>
                        <el-button type="primary" @click="dialogFormVisible = true">退款</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="getTableData"
                    :page-count="pageCount"
                    :current-page="currentPage"
                    background
                    layout="prev, pager, next">
            </el-pagination>
            <el-dialog title="退款详情" :visible.sync="dialogFormVisible">
                <el-form :data="refund">
                    <div>
                        <div class="house">
                            <img src="" alt="">
                            <span class="name">{{refund.goods_name}}</span>
                            <span class="statu">（优惠券编号：{{refund.serial_no}}；{{refund.orders_status}}）</span>
<!--                            <span class="lou">{{real_estate_name}}</span>-->
                        </div>
<!--                        <div class="house">-->
<!--                            <div class="up">-->
<!--                                <img src="" alt="">-->
<!--                                <span class="name">1期1栋1单元12楼1201室</span>-->
<!--                                <span class="statu">（认购状态：{{subscription_status}}；房源状态：{{listing_status}}；认购金：{{subscribe}}）</span>-->
<!--                                <span class="lou">{{real_estate_name}}</span>-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
                    <el-form-item class="tuikuan" label="退款原因">
                        <el-input type="textarea" v-model="refund.desc"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="myRefund(row)">确 定</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </div>
            </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="已取消" name="third">
            <el-form ref="form" :model="orders2" label-width="80px">
                <el-form-item label="订单类型">
                    <el-select v-model='orders2.goods_type'>
                        <el-option label="全部" value="aa"></el-option>
                        <el-option label="团购优惠" value="bb"></el-option>
                        <el-option label="房源认购" value="cc"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="orderTime" label="开始时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="orders2.start_time" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item class="orderTime" label="结束时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="orders2.end_time" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="所属楼盘">
                    <el-select v-model='orders2.real_estate_name'>
                        <el-option label="全部" value="aa"></el-option>
                        <el-option label="团购优惠" value="bb"></el-option>
                        <el-option label="房源认购" value="cc"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="买家手机号" label-width="85px" >
                    <el-input v-model="orders2.user_phone"></el-input>
                </el-form-item>
                <el-form-item label="代下单用户" label-width="85px">
                    <el-select v-model='orders2.admin_account'>
                        <el-option label="全部" value="aa"></el-option>
                        <el-option label="团购优惠" value="bb"></el-option>
                        <el-option label="房源认购" value="cc"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单号">
                    <el-input v-model="orders2.orders_no"></el-input>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
            </el-form>
            <el-table
                    :data="tableData3"
                    style="width: 100%">
                <el-table-column
                        prop="orders_no"
                        label="订单号">
                </el-table-column>
                <el-table-column
                        prop="goods_name"
                        label="商品">
                </el-table-column>
                <el-table-column
                        prop="user.user_name"
                        label="下单用户">
                </el-table-column>
                <el-table-column
                        prop="orders_total"
                        label="订单总额">
                </el-table-column>
                <el-table-column
                        prop="orders_time"
                        label="下单时间">
                </el-table-column>
                <el-table-column
                        prop="payment_method"
                        label="支付方式">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="260px">
                    <template scope="scope">
                        <el-button type="primary" @click="detail(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="getTableData"
                    :page-count="pageCount"
                    :current-page="currentPage"
                    background
                    layout="prev, pager, next">
            </el-pagination>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import * as api from '../utils/api'
    export default {
        name: "OrderManage",
        data(){
            return{
                currentPage:1,
                pageCount:0,
                activeName:'first',
                promo_code:'',
                promo_status:'',
                real_estate_name:'',
                subscription_status:'',
                listing_status:'',
                subscribe:'',
                orders:{
                    goods_name:'',
                    goods_type:'',
                    admin_account:'',
                    start_time:'',
                    end_time:'',
                    real_estate_name:'',
                    user_phone:'',
                    orders_no:'',
                    serial_no:'',
                    orders_status:'',
                    sal:'',
                },orders1:{
                    goods_name:'',
                    goods_type:'',
                    admin_account:'',
                    start_time:'',
                    end_time:'',
                    real_estate_name:'',
                    user_phone:'',
                    orders_no:'',
                    serial_no:'',
                    orders_status:'',
                    sal:'',
                },orders2:{
                    // goods_name:'',
                    goods_type:'',
                    admin_account:'',
                    start_time:'',
                    end_time:'',
                    real_estate_name:'',
                    user_phone:'',
                    orders_no:'',
                    serial_no:'',
                    orders_status:'',
                    sal:'',
                },
                tableData: [],
                tableData2: [],
                tableData3: [],

                dialogFormVisible: false,
                refund: {
                    goods_name:'一期13栋一单元一楼2号(绿地498)',
                    orders_status:'已付款',
                    serial_no:'1212121',
                    desc:''
                },
                formLabelWidth: '120px'
            }
        },
        created() {
            this.getTableData(this.currentPage)
        },
        methods:{
            getTableData(val){
                console.log(val)
                // val!==undefined ? this.currentPage=1 : this.currentPage=val;
                this.axios({
                    method:'get',
                    url:api.SELECT_ORDERMANAGE,
                    params: {limit:3,page:val,sal:this.orders.sal,orders_status:this.orders.orders_status}
                }).then((data)=>{
                    console.log(data);
                    data.data.dataList.map(item=>{
                        if (item.orders_status==='待付款'){
                            console.log(item)
                            this.tableData.push(item)
                        }else if (item.orders_status==='已付款'){
                            console.log(item)
                            this.tableData2.push(item)
                        }else if (item.orders_status==='已取消'){
                            console.log(item)
                            this.tableData3.push(item)
                        }
                    })
                    console.log(this.tableData.length)
                    console.log(this.tableData2.length)
                    console.log(this.tableData3.length)

                    if (data.status==200){
                        // this.tableData=data.data.dataList;
                        this.currentPage=data.data.currentPage;
                        this.pageCount=data.data.totalPage
                    }
                })
            },
            handleClick() {

            },
            orderSelect(){
                this.axios({
                    method:'get',
                    url:api.SELECT_ORDERMANAGE,
                    params: {
                        user_phone:this.orders.user_phone,
                        real_estate_name:this.orders.real_estate_name,
                        goods_type:this.orders.goods_type,
                        admin_account:this.orders.admin_account,
                        orders_no:this.orders.orders_no,
                        start_time:this.orders.start_time,
                        end_time:this.orders.end_time
                    }
                }).then((data)=>{
                    console.log(data);
                    if (data.status==200){
                        this.tableData=data.data.dataList
                        this.currentPage=data.data.currentPage;
                        this.pageCount=data.data.totalPage
                    }
                })
            },
            // 查看详情
            detail(row){
                console.log(row)
                // this.axios({
                //     method:'get',
                //     url:api.SELECTORDERBYNO,
                //     params:{orders_no:row.order_no}
                // }).then((data)=>{
                //     console.log(data)
                //     this.$router.push({
                //         name:'OrderDetails',
                //         path:'/Home/ZxHousingManager/OrderDetails',
                //         query: {
                //
                //         },
                //     })
                // })
                this.$router.push({
                    name:'OrderDetails',
                    path:'/Home/ZxHousingManager/OrderDetails',
                    query:{row}
                })
            },
            // 收款详情
            receive(row){
                this.$router.push({
                    name:'CollectionDetails',
                    path:'/Home/ZxHousingManager/CollectionDetails',
                    query: {row},
                })
            },
            // 退款详情
            myRefund(row){
                this.dialogFormVisible=false;
                console.log(row);
                this.axios({
                    method:'post',
                    url:api.REFUND_MONEY,
                    data:{disponse_id:row.refund_id}
                }).then((data)=>{
                    console.log(data)
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-form-item{
        width: 260px;
        float: left;
    }
    .orderTime{
        width: 220px;
        float: left;
        .el-col-11{
            width: 140px;
        }
    }
    .el-col-2{
        width:5px
    }
    .el-input{
        width: 150px;
        float: left;
    }
    .el-pagination{
        text-align: center;
    }
    .house{
        padding: 10px;
        background-color: lightgray;
        min-height: 50px;
        margin: 5px auto;
        .up{
            height: 50px;
        }
        button{
            display: block;
            height: 30px;
            line-height: 0;
            margin: 0 auto;
        }
        img{
            display: block;
            background-color: #ff9afd;
            width: 50px;
            height: 50px;
            float: left;
        }
        span{
            display: block;
            line-height: 50px;
            float: left;
        }
        .name{
            color: #4e58ff;
        }
        .lou{
            color: #4e58ff;
            float: right;
        }
    }
    .tuikuan{
        width: 100%;
    }
    .el-dialog__footer{
        text-align: center;
    }
</style>